<template>
  <div class="menu-box">
    <div class="logo-box flx-center">
      <img src="@/assets/images/logo.png" :style="{ width: isCollapse ? '80%' : '60%' }" alt="" @click="handleTo('/')" />
    </div>
    <el-menu router :default-active="route.path" :collapse-transition="false" :collapse="isCollapse" class="menu-list">
      <template v-for="(item, index) in routes" :key="index">
        <template v-if="!item.meta.hide">
          <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
            <template #title>
              <el-icon v-if="item.meta.icon">
                <component :is="item.meta.icon"></component>
              </el-icon>
              <span>{{ item.meta.title }}</span>
            </template>
            <template v-for="(sub, i) in item.children" :key="i">
              <menu-item v-if="!item.meta.hide" :item="sub"></menu-item>
            </template>
          </el-sub-menu>
          <menu-item v-else :item="item"></menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts" setup>
import { useRoute, useRouter } from 'vue-router'
import routes from '@/router/routes'
import MenuItem from './MenuItem.vue'

const route = useRoute()
const props = defineProps(['isCollapse'])
const { isCollapse } = toRefs(props)

const router = useRouter()
const handleTo = (path: string) => {
  router.push(path)
}
</script>

<style lang="less" scoped>
.menu-box {
  width: 100%;
  height: 100%;
  overflow: hidden;
  .logo-box {
    height: 60px;
    img {
      cursor: pointer;
    }
  }
  .menu-list {
    height: calc(100% - 60px);
    border: none;
    overflow-y: auto;
    overflow-x: hidden;
  }
}
</style>
